/* eslint-disable react/react-in-jsx-scope */
import {
  useState,
  createContext,
  useEffect,
  useRef,
} from "react";

import { ChatBotDrawer } from "./ChatBotDrawer";
import { WhiteBoard } from "./WhiteBoard";
import { FloatButton, message } from "antd";
import { useDispatch } from "react-redux";
import {
  EditOutlined,
  ClearOutlined,
  DeleteOutlined,
  PlayCircleOutlined,
  RobotOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons";

export const DrawerStatus = createContext(null);

export default function WhiteBoardControl() {
  const [open, setOpen] = useState(false); // drawer
  const [isClear, setIsClear] = useState(false);
  const [canvasWidth, setCanvasWidth] = useState(window.innerWidth);
  const [canvasHeight, setCanvasHeight] = useState(window.innerHeight);
  const [fButtonSelected, setFButtonSelected] = useState(2); // 默认选中画笔
  const stageRef = useRef(null);

  /* 画笔设置 */
  const [paintSettings, setPaintSettings] = useState({
    selectedPainter: true,
    stroke: "black",
    strokeWidth: 5,
  });

  const dispatch = useDispatch();

  useEffect(() => {
    if (fButtonSelected != 1 && fButtonSelected != 2) {
      setPaintSettings({
        selectedPainter: false,
      });
    }
  }, [fButtonSelected]);

  const FButton = ({ icon, selected, callBack }) => {
    return (
      <FloatButton
        onClick={() => {
          callBack();
          if (selected !== false) {
            setFButtonSelected(selected);
          }
        }}
        icon={icon}
        type={selected === fButtonSelected ? "primary" : "default"}
      ></FloatButton>
    );
  };

  const buttonsInfo = [
    /* 清空画布 */
    {
      icon: <DeleteOutlined />,
      callBack: () => {
        setIsClear(true);
      },
      selected: false, // 不渲染选中效果
    },
    /* 橡皮擦 */
    {
      icon: <ClearOutlined />,
      callBack: () => {
        setPaintSettings({
          selectedPainter: true,
          stroke: "rgb( 243,244,247)",
          strokeWidth: 50,
        });
      },
    },
    /* 画笔 */
    {
      icon: <EditOutlined />,
      callBack: () => {
        setPaintSettings({
          selectedPainter: true,
          stroke: "black",
          strokeWidth: 5,
        });
      },
    },
    /* 录制 */
    {
      icon: <PlayCircleOutlined />,
      callBack: () => {
        // const stage = stageRef.current.getStage();
        // const mediaStream = stage.toCanvas().captureStream(30);
      },
      selected: false,
    },
    /* 取消 */
    {
      icon: <CloseCircleOutlined />,
      callBack: () => {
        dispatch({ type: "set", whiteBoardMode: false });
      },
      selected: false,
    },
    /* 课堂机器人 */
    {
      icon: <RobotOutlined />,
      callBack: () => {
        setOpen(true);
      },
      selected: false,
    },
  ];

  const buttons = buttonsInfo.map(({ icon, callBack, selected }, i) => (
    <FButton
      icon={icon}
      selected={selected ?? i}
      callBack={callBack}
      key={i}
    ></FButton>
  ));

  useEffect(() => {
    const update = () => {
      setCanvasHeight(window.innerHeight);
      setCanvasWidth(window.innerWidth);
    };
    addEventListener("resize", update);

    return () => {
      removeEventListener("resize", update);
    };
  }, []);

  return (
    <>
      <DrawerStatus.Provider value={[open, setOpen]}>
        <ChatBotDrawer></ChatBotDrawer>
      </DrawerStatus.Provider>
      <WhiteBoard
        settings={{
          clearHooks: [isClear, setIsClear],
          paintSettings: paintSettings,
        }}
        ref={stageRef}
      ></WhiteBoard>
      <FloatButton.Group shape="square" style={{ right: 50 }}>
        {buttons}
      </FloatButton.Group>
    </>
  );
}
